<style scoped>
.car-offer{
    padding: 15px;
}
.offer-title{
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    line-height: 35px;
    background-color: #edf2f6;
}
.car-info{
    padding: 15px;
}
.next-btn{
    text-align: right;
}
.title-right{
    float: right;
}
</style>

<style>
.common-car-title{
    border-bottom:1px solid #f2f2f2;
    overflow: hidden;
    padding:10px 0;
}
.common-car-title h3{
    position: relative;
    display: inline-block;
    font-size:16px;
    padding-left:15px;
}
.common-car-title h3:before{
    content:'';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:3px;
    background-color:#3db1fa;
}
.common-title-r{
    width : 250px;
    float: right;
}
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="car-offer">
            <div class="common-car-title">
                <h3>配送信息</h3>
                <div class="common-title-r">
                    <Steps :current="3" size="small">
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                    </Steps>
                </div>
            </div>
            <div class="offer-title">
                保单配送信息
                <div class="title-right">
                    <Checkbox @on-change="addresseeChange">同车主</Checkbox>
                </div>
            </div> 
            <div class="car-info common-box-body">
                <Form :model="addressee" ref="addressee" :rules="ruleValidate">
                    <Row>
                        <Col span="8">
                            <FormItem label="姓名" prop="addresseeName">
                                <Input v-model="addressee.addresseeName" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="手机号"  prop="addresseeMobile">
                                <Input v-model="addressee.addresseeMobile" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="电子邮箱" prop="policyEmail">
                                <Input v-model="addressee.policyEmail" placeholder=""></Input>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="地区" prop="area">
                                 <Cascader v-model="addressee.area" :data="areas" @on-change="areaChange" :load-data="loadData"></Cascader>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="详细地址" prop="addresseeDetails">
                                <Input v-model="addressee.addresseeDetails" placeholder=""></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>           
            <Row class="next-btn">
                <Col span="3" offset="15">
                    <Button long type="primary" size="large" shape="circle" @click="next">下一步</Button>                    
                </Col>
                <Col span="3" offset="1">
                    <Button long type="ghost" size="large" shape="circle" @click="goBack">返回上一步</Button>
                </Col>
            </Row>              
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <!-- <Modal
            v-model="provinceModal">
            <div class="province-div" v-for="item in refarry" :key="item.value" @click="changeProvince(item.value)">
                {{item.text}}
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="closeModal">确定</Button>
            </div>
        </Modal>   -->
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city2 from '../../asset/js/city2'
import { getProvinces , getCity  , applyUnderwrite} from '../../api/api'
export default {
    data () {
        return {
            spinShow: false,
            carnmuber : {
                carid:'',
            },            
            refarry:city2,
            select1:'27',
            areas:[],
            ref:'京',
            provinceModal:false,
            modal_loading:false,
            addressee:{
                addresseeName:'',
                addresseeMobile:'',
                policyEmail:'',
                addresseeDetails:'',
                addresseeProvince:'',
                addresseeCity:'',
                addresseeCounty:''
            },
            ruleValidate:{
                addresseeName:[
                    { required: true, message: '请正确填写收件人姓名', trigger: 'blur,change' }
                ],
                addresseeMobile:[
                    { required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请正确填写收件人手机号', trigger: 'blur,change' }
                ],
                addresseeDetails:[
                    { required: true, message: '请正确填写收件人详细地址', trigger: 'blur,change' }
                ],
                policyEmail:[
                    { required: true, type: 'email',  message: '请正确填写电子邮箱', trigger: 'blur,change' }
                ],
                area:[
                    { required: true, type: 'array', max: 3, message: '请选择地区', trigger: 'change' }
                ],
            }
        }
    },
    components: {
        productTitle
    },
    computed: {
        stateCarinfo(){
             return this.$store.state.carinfo
        }
    },
    mounted () {
        this.getAllProvince()
    },
    methods: {
        areaChange(value, selectedData){
            console.log(value,selectedData)
            this.addressee.addresseeProvince = value[0]
            this.addressee.addresseeCity = value[1]
            this.addressee.addresseeCounty = value[2]
            this.addressee.addresseeProvinceName = selectedData[0].label
            this.addressee.addresseeCityName = selectedData[1].label
            this.addressee.addresseeCountyName = selectedData[2].label
        },      
        loadData (item, callback) {                    
            if(item.children.length == 0){
                item.loading = true;
         
                let _params = {
                    provinceCode:item.value,
                } 
                new Promise((resolve, reject) => {
                    getCity(_params).then(response => {
                        console.log(response.data)
                        if (response.data.state == 1) {
                            let _data = response.data.data
                            const _list = _data.map(sitem =>{
                                const _child = sitem.countyList.map(citem =>{
                                    return {
                                        value:citem.countyCode,
                                        label:citem.countyName
                                    }
                                })
                                return {
                                    value:sitem.cityCode,
                                    label:sitem.cityName,
                                    cityPlate:sitem.cityPlate,
                                    children:_child
                                }
                            })
                            item.children = item.children.concat(_list)
                            item.loading = false;
                            callback();
                        } else {
                            item.loading = false;
                            callback();
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            }                    
        },
        getAllProvince(){
            new Promise((resolve, reject) => {
                getProvinces().then(response => {
                    console.log(response.data)
                    if (response.data.state == 1) {
                        let _data = response.data.data
                        const _list = _data.map(item =>{
                            return {
                                value:item.provinceCode,
                                label:item.provinceName,
                                children: [],
                                loading: false
                            }
                        })
                        this.areas = _list
                    } else {
                        
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            }); 
        },
        addresseeChange(e){
            console.log(e)
            if(e){
                console.log(this.stateCarinfo.ownerName)
                this.addressee.addresseeName = this.stateCarinfo.ownerName
                this.addressee.addresseeMobile = this.stateCarinfo.ownerMobile             
            }else{
                 this.addressee.addresseeName = ''
                 this.addressee.addresseeMobile = ''
            }
        },
        goBack(){
            window.history.go(-1);
        },
        next(){
            this.$refs['addressee'].validate((valid) => {
                if (valid) {
                        if(this.stateCarinfo.bjCodeFlag&&this.stateCarinfo.bjCodeFlag == 1){
                            this.addressee.bjCodeFlag = 1
                        }
                        let _params = {
                            insurerCode : this.stateCarinfo.insurerCode,
                            bizID : this.stateCarinfo.bizID,
                            channelCode:this.stateCarinfo.channelCode,
                        }
                        let _obj = Object.assign({},this.addressee,_params)
                        console.log(_obj)
                        this.$store.dispatch('changeCarInfo',this.addressee)
                        this.$router.push({'name':'car_confirm'})  
                    } else {
                        
                    }
                })
              
        }    
    }
}
</script>
